// 从node_modules中引入
import echarts from 'echarts'
import '../../node_modules/echarts/map/js/china.js'
import '../../node_modules/echarts/map/js/world.js'
export default {
    name: 'Main',
    data() {
        return {
            msg: "查看更多地区",
            flag: true,   //  控制全球是否展示数据
            flag1: true,  //  控制中国是否展示更多数据
            newslist: [], //  从网上爬下来的地区疫情数据
            showlist: [], //  用于控制展示6个省份或更多
            showlist1: [],
            totalConfirmed: 0,
            totalRecovered: 0,
            totalDeaths: 0,
            totalChinaConfirmed: 0,
            totalChinaRecovered: 0,
            totalChinaDeaths: 0,
            chinalist: [],
            keyword:""
        }
    },
    // 生命周期方法：created（先）/mounted（后）
    // 自动执行
    // created：整个页面的组件都创建好了，数据未绑定
    created() {
        // 发送ajax请求
        // this.$axios.get("http://api.tianapi.com/txapi/ncovcity/index?key=61dc4aa584319fd07a9ff7248e22c456")
        this.$axios.get("http://localhost:8080/test")
            // 获得请求
            // 无出错时
            .then(res => {
                console.log(res);
                // 从网上爬下来的地区疫情数据

                this.newslist = res.data;
                // 控制展示6个省份或更多
                this.showlist = this.newslist.slice(0, 10);
                var maplist = []; //  用于组装世界地图与爬下来的疫情数据（只放国家或地区即可）
                var maplist1 = []; //  用于组装中国地图与爬下来的疫情数据（只放省份即可）
                var xAxis = []; //  x轴
                var series1 = []; //  确诊
                var series2 = []; //  死亡
                var series3 = []; //  治愈
                // 开始组装
                for (var i = 0; i < this.newslist.length; i++) {
                    this.totalConfirmed += this.newslist[i].confirmed;
                    this.totalRecovered += this.newslist[i].recovered;
                    this.totalDeaths += this.newslist[i].deaths;
                    var obj = {};

                    if (this.newslist[i].country == "US") {
                        obj.name = 'United States';
                    } else if (this.newslist[i].country == "中国") {
                        obj.name = 'China';
                        for (var j = 0; j < this.newslist[i].provinceList.length; j++){
                            //  这个china必须定义在for循环里，否则会出错（未解）
                            var china = {};
                            china.name = this.newslist[i].provinceList[j].province;
                            china.value = this.newslist[i].provinceList[j].confirmed;
                            // console.log(china.name);
                            // console.log(china.value);
                            maplist1.push(china);
                            this.totalChinaConfirmed += this.newslist[i].provinceList[j].confirmed;
                            this.totalChinaRecovered += this.newslist[i].provinceList[j].recovered;
                            this.totalChinaDeaths += this.newslist[i].provinceList[j].deaths;
                            this.chinalist.push(this.newslist[i].provinceList[j]);
                        }
                        this.showlist1 = this.chinalist.slice(0,6);
                    } else {
                        obj.name = this.newslist[i].country;
                    }
                    obj.value = this.newslist[i].confirmed;

                    maplist.push(obj);
                    if (i < 6) {
                        xAxis.push(this.newslist[i].country);
                        series1.push(this.newslist[i].confirmed);
                        series2.push(this.newslist[i].deaths);
                        series3.push(this.newslist[i].recovered);
                    }
                }

                var myChartWorld = echarts.init(document.getElementById("worldmap"));

                var optionWorld = {
                    // 标题

                    title: {
                        sublink: 'http://esa.un.org/wpp/Excel-Data/population.htm',
                        top: 'top',
                        text: '世界疫情地图',
                        subtext: '',
                        x: 'center'
                    },
                    // 鼠标移动到地图上显示疫情数据
                    tooltip: {
                        trigger: 'item'
                    },
                    visualMap: {
                        min: 0,
                        max: 1000000,
                        text: ['High', 'Low'],
                        realtime: false,
                        calculable: true,
                        color: ['orangered', 'yellow', 'lightskyblue']
                    },

                    series: [{
                        name: '世界疫情地图',
                        type: 'map',
                        mapType: 'world',
                        label: {
                            normal: {
                                show: true, //	显示国家名称
                                fontSize: 5
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        //  控制地图缩放
                        roam: true,
                        itemStyle: {
                            emphasis: {
                                label: {
                                    show: true
                                }
                            }
                        },
                        data: maplist
                    }]

                };

                myChartWorld.setOption(optionWorld);

                var myChart = echarts.init(document.getElementById("map"));

                var option = {
                    // 背景
                    backgroundColor: '#FFFFFF',
                    // 标题
                    title: {
                        text: '中国疫情地图',
                        subtext: '',
                        x: 'center'
                    },
                    // 鼠标移动到地图上显示疫情数据
                    tooltip: {
                        trigger: 'item'
                    },

                    //左侧小导航图标
                    visualMap: {
                        show: true,
                        x: 'left',
                        y: 'bottom',
                        textStyle: {
                            fontSize: 10
                        },
                        splitList: [{
                            start: 1000
                        }, {
                            start: 500,
                            end: 999
                        }, {
                            start: 100,
                            end: 499
                        },
                            {
                                start: 10,
                                end: 99
                            }, {
                                start: 1,
                                end: 9
                            },
                        ],
                        color: ['#cc0000', '#ff4d4d', '#ff9999', '#ffe5e5']
                    },
                    //	控制图内数据
                    series: [{
                        name: '中国疫情地图',
                        type: 'map',
                        mapType: 'china',
                        label: {
                            normal: {
                                show: true, //	显示省份名称
                                fontSize: 8
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: maplist1
                    }]
                };

                myChart.setOption(option);

                // 基于准备好的dom，初始化echarts实例
                var myChartBar = echarts.init(document.getElementById('bar'));

                var posList = [
                    'left', 'right', 'top', 'bottom',
                    'inside',
                    'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
                    'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
                ];

                var app = {};

                app.configParameters = {
                    rotate: {
                        min: -90,
                        max: 90
                    },
                    align: {
                        options: {
                            left: 'left',
                            center: 'center',
                            right: 'right'
                        }
                    },
                    verticalAlign: {
                        options: {
                            top: 'top',
                            middle: 'middle',
                            bottom: 'bottom'
                        }
                    },
                    position: {
                        options: echarts.util.reduce(posList, function(map, pos) {
                            map[pos] = pos;
                            return map;
                        }, {})
                    },
                    distance: {
                        min: 0,
                        max: 100
                    }
                };

                app.config = {
                    rotate: 90,
                    align: 'left',
                    verticalAlign: 'middle',
                    position: 'insideBottom',
                    distance: 15,
                    onChange: function() {
                        var labelOption = {
                            normal: {
                                rotate: app.config.rotate,
                                align: app.config.align,
                                verticalAlign: app.config.verticalAlign,
                                position: app.config.position,
                                distance: app.config.distance
                            }
                        };
                        myChart.setOption({
                            series: [{
                                label: labelOption
                            }, {
                                label: labelOption
                            }, {
                                label: labelOption
                            }, {
                                label: labelOption
                            }]
                        });
                    }
                };


                var labelOption = {
                    show: true,
                    position: app.config.position,
                    distance: app.config.distance,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    rotate: app.config.rotate,
                    formatter: '{c}  {name|{a}}',
                    fontSize: 16,
                    rich: {
                        name: {
                            textBorderColor: '#fff'
                        }
                    }
                };

                // 柱状图
                var optionBar = {
                    color: ['#003366', '#006699', '#4cabce', '#e5323e'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        // data: ['Forest', 'Steppe', 'Desert', 'Wetland']
                        // 这里可以根据下面的series自动生成，但不能省略legend
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            mark: {
                                show: true
                            },
                            dataView: {
                                show: true,
                                readOnly: false
                            },
                            magicType: {
                                show: true,
                                type: ['line', 'bar', 'stack', 'tiled']
                            },
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        data: xAxis
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        name: '确诊',
                        type: 'bar',
                        barGap: 0,
                        label: labelOption,
                        data: series1
                    },
                        {
                            name: '死亡',
                            type: 'bar',
                            label: labelOption,
                            data: series2
                        },
                        {
                            name: '治愈',
                            type: 'bar',
                            label: labelOption,
                            data: series3
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChartBar.setOption(optionBar);
            })
            // 出错时：
            .catch(res => {})
    },
    // mounted：组件创建好，同时数据也绑定到页面了
    mounted() {},
    methods: {
        togglecity(item) {
            this.$set(item, "expanded", !item.expanded);
            /*原生级xdom，一般不写。e：event*/
            // var column = e.target;
            // var row = column.parentElement;
            // console.log(row);
            // var cities = row.nextElementSibling;
            /*****/
            // console.log(cities);
            // 设置元素的display属性 = “block”
            // 能够展示城市的原因：style优先级比class里的高
            // if (cities.style.display == "block") {
            //   cities.style.display = "none";
            // } else {
            //   cities.style.display = "block";
            // }

            // this.expanded = !this.expanded;
        },
        toggledata() {
            if (this.flag) {
                this.msg = "收起更多地区";
                this.showlist = this.newslist;
            } else {
                this.msg = "查看更多地区";
                this.showlist = this.newslist.slice(0, 10);
            }
            this.flag = !this.flag;
        },
        toggleChinaData() {
            if (this.flag1) {
                this.msg = "收起更多地区";
                this.showlist1 = this.chinalist;
            } else {
                this.msg = "查看更多地区";
                this.showlist1 = this.chinalist.slice(0, 6);
            }
            this.flag1 = !this.flag1;
        }

    }
}